<template>
  <div class='container'>
    <div class="form">
    <div class="inputK">
    <div class="btn"><input placeholder="账号" v-model="username"  type="text" style="text-indent:10px;color:#666;font-weight:bold;border:0;width:90%;height:30px;border-radius:20px;background-color:rgba(253, 253, 253, 0.5)"> </div>
    <div class="btn" style="position:relative">
    <span style="display:inline-block;position:absolute;right:20px;top:8px"><van-icon name="eye-o" @click="showP" /></span>
    <input placeholder="密码" v-model="password" :type="inputType" style="text-indent:10px;color:#666;font-weight:bold;border:0;width:90%;height:30px;border-radius:20px;background-color:rgba(253, 253, 253, 0.5)"> </div>
    <div class="btn-login">
      <div style="margin-top:10px"><button style="width:90%;height:40px;border-radius:20px;border:0" @click="setSession">登录</button></div>
      <div style="margin-top:10px"><button style="width:90%;height:40px;border-radius:20px;border:0" @click="register">注册</button></div>
</div>
    </div>

    </div>
  </div>
</template>
<script>
import router from "../router";
import {Toast} from "vant";

export default {
  name:'Login',
  data(){
    return{
      inputType:"password",
      count:'坏小孩',
      password:'',
      username:""

    }
  },
  methods:{
   async register(){
     if(this.username==''||this.password==''){
       Toast('用户名或者密码不能为空！');
       return false
     }
     const res=await this.$http.post('/users/userRegister',{
        username:this.username,
        password:this.password,
       nickname:this.username
      })
     if(res.data.code==0){
       Toast('注册成功！');
     }

    },
    showP(){
     if(this.inputType==="password"){
       this.inputType="text"
     }else{
       this.inputType="password"
     }
    },
    setSession(){
     if(this.username==''){
       Toast('用户名不能为空！');
       return false
     }
    this.$http.post('/users/login',{
        username:this.username,
        password:this.password
      }).then((res)=>{
      const token=res.data.result.token
      const user_id=res.data.result.userinfo.id
      const username=res.data.result.userinfo.username
      const nickname=res.data.result.userinfo.nickname
      const userimage=res.data.result.userinfo.userImage
      localStorage.setItem('user_id',user_id)
      localStorage.setItem('username',username)
      localStorage.setItem('token',token);
      localStorage.setItem('nickname',nickname);
      localStorage.setItem('userimage',userimage);
      let chatList=JSON.parse(localStorage.getItem('chatallinfo'))
      if(!chatList){
        localStorage.setItem('chatallinfo',JSON.stringify([]))
      }

      router.push('/')
    }).catch(()=>{
      Toast('用户名或者密码不正确！');
        return false
    })


    }
  }
}
</script>
<style lang='less' scoped>
.container{
  position:absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background-image: url('../../static/11.png');
  background-size: cover;
   background-position: center;

  .form{
    text-align: center;
    width: 70%;
    height: 200px;
    background-color:rgba(200,200,200,0.6);
    border-radius: 30px;
    margin: 300px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    .inputK{
      .btn{
        margin-top:5px ;
      }
    }

  }
}

</style>
